<script setup lang="ts">
import { getCurrentUserProducts } from '@/api/userinfo/UserInfoApi';
import { UserProductInfo } from '@/models/userinfo/UserProductInfo';
import { useUserStore } from '@/stores/useUserStore';
import { formatTimestamp } from '@/utils/format';
import { onMounted, ref } from 'vue';

const productInfo = ref<UserProductInfo>(new UserProductInfo());

onMounted(async () => {
    productInfo.value = await getCurrentUserProducts();
});
</script>

<template>
    <van-row>
        <van-col span="24" class="title-tips">
            <span style="color:red;">*</span>本产品严禁用于非法用途
        </van-col>
    </van-row>
    <van-row>
        <van-col span="24" class="title-tips">
            <span style="color:red;">*</span>只限于爱好交流
        </van-col>
    </van-row>
    <van-grid :gutter="20" :column-num="2">
        <van-grid-item v-for="(ele, idx) in productInfo?.products" :key="ele.id" :to="ele.frontPath">
            <van-row class="game-tab">
                <van-col :span="24">
                    <van-row class="tab-title">
                        <van-col :span="24">
                            {{ ele.productName }}
                        </van-col>
                    </van-row>
                    <van-row class="tab-icon zzz">
                        <van-col :span="24">
                        </van-col>
                    </van-row>
                    <van-row class="tab-oper ">
                        <van-col :span="24">
                            开始
                        </van-col>
                    </van-row>
                    <van-row class="tab-tips">
                        <van-col :span="24">
                            {{ formatTimestamp(ele.validTime) }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>


        </van-grid-item>
    </van-grid>
</template>

<style lang="scss" scoped>
.title-tips {
    margin: 10px auto;
    height: 30px;
    line-height: 30px;
    text-align: center;

}

.game-tab {
    text-align: center;
    background-color: #e3e3e3;
    width: 100%;

    .tab-tile {
        height: 30px;
        line-height: 30px;
        font-size: 36px;
        font-weight: bolder;
    }

    .tab-icon {
        height: 150px;
        width: 100%;
    }

    .zzz {
        background: url(../../../public/images/game/zzz.jpg) no-repeat 0 0;
        background-size: cover;
    }

    .tab-oper {
        font-size: 18px;
        height: 30px;
        line-height: 30px;
    }

    .tab-tips {
        font-size: 16px;
    }
}
</style>